<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" type="image/x-icon" href="./static/logo.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>同声传译</title>
    <link href="./static/css/tailwind.min@2.2.16.css" rel="stylesheet">
    <script src="./static/js/jquery.js"></script>
    <script src="./static/js/vue2.js"></script>
    <link href="./static/css/element@2.15.14.css" rel="stylesheet">
    <script src="./static/js/element@2.15.14.js"></script>
    <link href="./static/theme/default.css" rel="stylesheet">
    <style>
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        body.uiplugin {
            display: block;
        }
        #app {
        	overflow: hidden;
        }
        .no-select {
        	-webkit-user-select: none; /* Safari */
        	-ms-user-select: none; /* IE 10+/Edge */
        	user-select: none; /* Standard syntax */
        }
        @font-face {
        	font-family: CustomeFont;
        	src: url('./static/font/AlimamaFangYuanTiVF-Thin-2.ttf');
        }
        
        #app {
            font-family: CustomeFont;
        }
        
        .loading {
            text-align: center;
            color: #999;
            font-style: italic;
            margin: 20px 0;
        }
        
        .note-area>.el-textarea>textarea {
            height: 100%;
            padding: 8px 12px;
        }
        
        .note-btn {
            padding: 8px 16px !important;
            border-radius: 8px !important;
        }
        
        /* 滚动条样式 */
        ::-webkit-scrollbar {
            width: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 4px;
        }
        
        ::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 4px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .main-content {
                grid-template-columns: 1fr;
            }
            
            header {
                flex-direction: column;
                gap: 15px;
                align-items: flex-start;
            }
        }
        
        .translation {
            color: #374151;
        }
        
        .transcription {
            font-size: 0.9rem;
            font-style: italic;
            color: #6b7280;
        }
    </style>
</head>
<body>
    <div id="app" class="w-full h-full px-12 py-4 relative" style="background: linear-gradient(180deg, #f8fafd, #eff7ff);">
        <header class="flex items-center mb-4" style="height: 60px;">
            <img class="mr-2" src="./static/logo.png" style="width: 36px;height: 36px;" />
            <div class="text-2xl text-gray-700 font-semibold">同声传译</div>
        </header>
        
        <div class="absolute left-12 right-12 bottom-8 p-2 flex bg-white rounded-xl shadow-lg" style="top: calc(60px + 2rem);">
            <!-- 左侧：实时翻译结果 -->
            <div class="p-4 flex flex-col" style="width: 50%;">
                <div class="mb-2 text-xl text-gray-600">实时翻译结果</div>
                <div class="flex items-center mb-2 text-lg text-gray-500">
                    <span class="mr-2">自动识别</span>
                    <svg t="1764953403602" class="icon mr-2" style="width: 48px;height: 24px;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4826" width="32" height="32"><path d="M99.119848 428.002088h828.014506a43.350032 43.350032 0 0 0 43.350032-43.350031 43.248882 43.248882 0 0 0-16.451337-33.957525 43.465632 43.465632 0 0 0-9.219107-8.756707L635.50424 124.869766a43.350032 43.350032 0 1 0-49.809186 70.964002l207.270952 145.461032H99.119848a43.350032 43.350032 0 0 0 0 86.707288zM927.134354 601.07709H99.119848a43.350032 43.350032 0 0 0-43.350032 43.350032 43.205532 43.205532 0 0 0 16.451337 33.9503c2.564877 3.272927 5.635504 6.242405 9.219107 8.756706l309.309701 217.075284a43.313907 43.313907 0 0 0 60.386594-10.584632 43.350032 43.350032 0 0 0-10.577407-60.386595L233.288196 687.777154h693.846158a43.350032 43.350032 0 0 0 0-86.700064z" fill="#6b7280" p-id="4827"></path></svg>
                    <el-select v-model="selected_language" size="small" placeholder="请选择">
                        <el-option label="中文简体" value="zh"></el-option>
                        <el-option label="English" value="en"></el-option>
                        <el-option label="日语" value="ja"></el-option>
                        <el-option label="韩语" value="ko"></el-option>
                    </el-select>
                    <el-dialog title="翻译语言" :visible.sync="visible_select_language" width="360px">
                        <el-form>
                            <el-form-item label="目标语言">
                                <el-select v-model="selected_language" size="small" placeholder="请选择">
                                    <el-option label="中文简体" value="zh"></el-option>
                                    <el-option label="English" value="en"></el-option>
                                    <el-option label="日语" value="ja"></el-option>
                                    <el-option label="韩语" value="ko"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <div class="flex justify-end items-center">
                        	<el-button class="form-submit-btn" @click="closeDialog" :disabled="selected_language===''" type="primary">保存</el-button>
                        </div>
                    </el-dialog>
                </div>
                <div class="flex-auto relative">
                    <div class="absolute w-full h-full overflow-auto translation-result" id="translationResult" v-html="translation_result"></div>
                </div>
            </div>
            
            <!-- 右侧：笔记区域 -->
            <div class="p-4 flex flex-col" style="width: 50%;">
                <div class="mb-2 text-xl text-gray-600">会议笔记</div>
                <div class="flex-auto relative note-area">
                    <el-input class="w-full h-full" v-model="note_content" type="textarea" placeholder="在这里输入您的会议笔记..."></el-input>
                    <div v-if="selected_language" class="absolute top-2 right-3">
                        <el-button class="note-btn" @click="clearNoteOpt" type="info"><span v-html="langs[selected_language]['clear_btn']"></span></el-button>
                        <el-button class="note-btn" @click="saveNoteOpt" type="primary"><span v-html="langs[selected_language]['save_btn']"></span></el-button>
                    </div>
                    <div v-else class="absolute top-2 right-3">
                        <el-button class="note-btn" @click="clearNoteOpt" type="info">清空</el-button>
                        <el-button class="note-btn" @click="saveNoteOpt" type="primary">保存</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        const meetingId = "{{ meeting_id }}";
    </script>
    <script>
    	new Vue({
    		el: '#app',
    		data: function() {
    			return {
                    is_max: false,
                    loading: true,
                    tip: '',
                    langs: {
                        "zh": {
                            "wait_label": '<div class="loading">等待翻译结果...</div>',
                            "clear_btn": '清空',
                            "save_btn": '保存'
                        },
                        "en": {
                            "wait_label": '<div class="loading">Waiting for translation result...</div>',
                            "clear_btn": 'Clear',
                            "save_btn": 'Save'
                        }
                    },
                    selected_language: '',
                    websocket: null,
                    translation_result: '',
                    is_recording: false,
                    note_content: '',
                    visible_select_language: true,
    				version: ''
    			}
    		},
    		methods: {
                // 初始化WebSocket连接
                initWebSocket(language) {
                    if (this.websocket) {
                        this.websocket.close()
                    }
                    
                    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:"
                    const wsUrl = `${protocol}//${window.location.host}/ws/${meetingId}/${language}`
                    const that = this
                    const ele = document.getElementById('translationResult')
                    this.websocket = new WebSocket(wsUrl)
                    
                    this.websocket.onopen = function() {
                        console.log("WebSocket连接已打开");
                        // 连接成功时，恢复显示加载提示（如果没有翻译结果）
                        that.translation_result = that.langs[that.selected_language]['wait_label']
                    }
                    
                    this.websocket.onmessage = function(event) {
                        const text = event.data
                        
                        // 检查是否是特殊通知
                        if (text === "__RECORDING_STOPPED__") {
                            that.is_recording = false
                            that.$message.success('会议已结束')
                        } else if (text === "__PROGRAM_CLOSED__") {
                            that.is_recording = false
                            
                            // 关闭WebSocket连接
                            if (that.websocket) {
                                that.websocket.close()
                                that.websocket = null
                            }
                        } else {
                            if (that.translation_result === that.langs[that.selected_language]['wait_label']) {
                                that.translation_result = ''
                            }
                            const obj = JSON.parse(text)
                            that.translation_result += '<p class="translation">' + obj.translation + '</p>'
                            that.translation_result += '<p class="transcription">' + obj.transcription + '</p>'
                            ele.scrollTop = ele.scrollHeight
                        }
                    }
                    
                    this.websocket.onerror = function(error) {
                        console.error("WebSocket错误:", error)
                    }
                    
                    this.websocket.onclose = function() {
                        console.log("WebSocket连接已关闭")
                    }
                },
                closeDialog() {
                    this.visible_select_language = false
                    this.translation_result = this.langs[this.selected_language]['wait_label']
                    this.initWebSocket(this.selected_language)
                },
                // 保存笔记到本地
                saveNoteOpt() {
                    const notes = this.note_content
                    if (!notes.trim()) {
                        this.$message.warning("笔记内容不能为空!")
                        return
                    }
                    
                    // 创建Blob对象
                    const blob = new Blob([notes], { type: "text/plain;charset=utf-8" })
                    
                    // 创建下载链接
                    const url = URL.createObjectURL(blob)
                    const a = document.createElement("a")
                    a.href = url
                    
                    // 设置文件名（使用当前时间）
                    const now = new Date();
                    const timestamp = now.toISOString().replace(/[:.]/g, "-")
                    a.download = `会议笔记_${timestamp}.txt`
                    
                    // 触发下载
                    document.body.appendChild(a)
                    a.click()
                    
                    // 清理
                    document.body.removeChild(a)
                    URL.revokeObjectURL(url)
                
                    // 显示保存成功提示
                    this.$message.success("笔记已成功保存!")
                },
                // 清空笔记
                clearNoteOpt() {
                    this.note_content = ''
                },
    		},
            watch: {
                selected_language: {
                    handler(newVal, oldVal) {
                        if (!this.visible_select_language) {
                            this.translation_result = this.langs[this.selected_language]['wait_label']
                            this.initWebSocket(newVal)
                        }
                    }
                },
            },
    		mounted() {
                this.translation_result = this.langs['zh']['wait_label']
    		}
    	})
    </script>
</body>
</html>